import Taro, { Component } from '@tarojs/taro'
import {View,Text,Image} from '@tarojs/components'
import { AtDivider, AtNoticebar, AtButton } from 'taro-ui'
import './myOderss.scss'
import shandian from '../../img/shandian.png'
import right from '../../img/right.png'
import app from '../../main'

export default class MyOderss extends Component {
  config = {
    navigationBarTitleText: '我的订单'
  } 

  constructor () {
    super(...arguments)
    this.state={
        listTile: ['咨询医生','咨询患者','开始时间','结束时间','咨询记录','订单编号','下单时间','订单金额','优惠抵扣'],
        orderDetail:{},
        doctor_id:''
    }
  }

goWhere(item){
  console.log(item)
  // console.log('this.state.orderDetail.type',this.state.orderDetail.type)
    if(this.state.orderDetail.type == '快速咨询'){
      // console.log('this.state.orderDetail.status',this.state.orderDetail.status)
      if(this.state.orderDetail.status == '待支付' || this.state.orderDetail.status == '已支付' || this.state.orderDetail.status == '待接单'){
        // console.log('待支付||已支付||待接单',this.state.orderDetail.status)
         return
      }else{
        switch(item){
          case '咨询医生':
            app.navigateTo('../doctorindex/doctorindex'+'?id='+this.state.orderDetail.doctor_id);
          break;
          case '咨询患者':
            app.navigateTo('../myHealthrecords/myHealthrecords'+'?id='+this.state.orderDetail.doctor_id);
          break;
          case '咨询记录':
            app.navigateTo('../chatsub/pages/myOrderChat/myOrderChat?type=问诊订单&relate_id='+this.state.orderDetail.id+'&receiver_id='+this.state.orderDetail.doctor_id);
          break;
       }
      }
   }else{
      switch(item){
         case '咨询医生':
           app.navigateTo('../doctorindex/doctorindex'+'?id='+this.state.orderDetail.doctor_id);
         break;
         case '咨询患者':
           app.navigateTo('../myHealthrecords/myHealthrecords'+'?id='+this.state.orderDetail.doctor_id);
         break;
         case '咨询记录':
           app.navigateTo('../chatsub/pages/myOrderChat/myOrderChat?type=问诊订单&relate_id='+this.state.orderDetail.id+'&receiver_id='+this.state.orderDetail.doctor_id);
         break;
      }
   }
}
//到说明页面
gotoshoming(){
  app.navigateTo('../myshuoming/myshuoming');
}

  getDate(){
    let me = this
    let data = {order_id:this.$router.params.id}
    app.post('web/myself/myOrderDetail',data,function(res){
      me.setState({
        orderDetail:res.data.result
      },()=>{
        console.log(me.state.orderDetail)
      })
    })
  }

  //付款
  pay () {
    let me = this;
    let data = {
        health_archive_id:this.state.orderDetail.health_archive_id,
        inquiry_answer_id:this.state.orderDetail.id,
        order_code:this.state.orderDetail.order_code,
        type:this.state.orderDetail.type
    }
    app.post('web/myself/mySubmitOrder', data, function(res) {
        if (res.data.status == 200) {
            let params = res.data.result.jsparams
            app.callPayment(params, function(rsp) {
                app.success('支付成功');
                me.getDate()
            }, function(rsp) {
                app.toastMessage('支付失败');
            })
        } else {
            app.toastMessage(res.data.result);
        }
    })
  }

  componentWillUnmount () {
      console.log(122,this.$router.params.state)
      if(this.$router.params.state == '支付跳转'){
          Taro.reLaunch({
              url:'../eyeDoctor/eyeDoctor'
          })
      }
      // if(this.$router.params.orderss == '订单'){
      //     // app.redirectTo('../myOrders/myOrders')
      //     // app.navigateBack({detail:1})
      //     // app.navigateTo('../myOrders/myOrders')
      //     console.log(555555555)
      // }     
  }

  componentDidMount(){
    this.getDate()
  }

  // 关闭所有socket链接
  componentDidShow() {
    app.closeSockets();
  }

  render(){
    // 表格数据
    let orderDetail = this.state.orderDetail
    let orderStatus = ((orderDetail.type == '快速咨询' && orderDetail.status == '待支付') || (orderDetail.type == '快速咨询' && orderDetail.status == '已支付') || (orderDetail.type == '快速咨询' && orderDetail.status == '待接单')) ? '' : orderDetail.doctor_name
    // 整理 数据
    let orderDetails = [orderStatus,orderDetail.patient_name,orderDetail.start_time,
      orderDetail.end_time,'查看',orderDetail.order_code,orderDetail.order_time,orderDetail.totalpayble,
      orderDetail.coupon_discount]
      // 表格项
    let listArray = this.state.listTile.map((item,index) =>{
        return <View className='listItem'>
                    <View className='listTitle'>{item}</View>
                    {item == '咨询医生' || item =='咨询患者' || item =='咨询记录'
                    ? 
                    <View className='listRight' onClick={this.goWhere.bind(this,item)}>
                    <Text>{orderDetails[index]}</Text> 
                    <Image style='height:12px;width:12px;' src={right} />
                    </View>
                    :
                    <View className='listRight'><Text>{orderDetails[index]}</Text></View>
                    }
        </View>
    })
    //提示信息
    let remind = ''
    if(orderDetail.type == '快速咨询'){
        if(orderDetail.status == '待接单'){
          remind = `咨询订单正在派发给医生，请耐心等待。如果30分钟内没有医生接单，本咨询订单将会自动取消并退款。谢谢您的使用！`
        }else if(orderDetail.status == '待回复' || orderDetail.status == '咨询中'){
           remind = `${orderDetail.doctor_name}医生已经接受您的咨询请求，请到我的咨询中查看医生的回复。`
        }else if(orderDetail.status == '待退款' || orderDetail.status == '已退款'){
          remind = `咨询订单由于超时未被处理而自动取消了，订单费用会通过原路返回到您的账户，请注意查收。`
        }else if(orderDetail.status == '待评价'){
          remind = `本次咨询已结束，马上点击对本次咨询进行评价吧！`
        }else if(orderDetail.status == '咨询结束'){
           remind = `本次咨询已结束！`
        }else{
          remind = ''
        }
    }else if(orderDetail.type == '专家咨询'){
      console.log(orderDetail.status)
        if(orderDetail.status == '已支付'){
          remind = `订单支付成功，请尽快向医生发送您的问题哦，医生收到您的问题将会尽快给您回复。`
        }else if(orderDetail.status == '待回复' || orderDetail.status == '咨询中'){
           remind = `您的咨询医生已经收到，医生将会尽快回复您。`
        }else if(orderDetail.status == '待退款' || orderDetail.status == '已退款'){
          remind = `咨询订单由于超时未被处理而自动取消了，订单费用会通过原路返回到您的账户，请注意查收。`
        }else if(orderDetail.status == '待评价'){
          remind = `本次咨询已结束，马上点击对本次咨询进行评价吧！`
        }else if(orderDetail.status == '咨询结束'){
          remind = `本次咨询已结束！`
        }else{
          remind = ''
        }
    }
    console.log(remind)
    let styles = remind == '' ? 'display:none;' : ''
      return(
        <View className='myOrderss'>
            <View>
            <View className='topMessage' style={styles}>
               <AtNoticebar>{remind}</AtNoticebar>
            </View>
            <View className='topTitle'>
                    <View className='title_left'>
                        <View><Image className='title-image' src={shandian} /></View>
                        <View className='bigTitle'>{this.state.orderDetail.type}</View>
                    </View>
                    <View className='title_status'><Text>{this.state.orderDetail.status}</Text></View>
              </View>
           <View className='v1'><AtDivider className='divider' lineColor='#ebebeb' /></View> 
            <View className='orderList'>
            {/* 表格数据 */}
                {listArray}
                <View className='lastList'>
                    <Text className='tn'>实付金额:</Text>
                    <Text className='listTitle'>￥</Text>
                    <Text >{this.state.orderDetail.totalpayble}</Text>
                </View>
            </View>     
            <View className='bottonText' onClick={this.gotoshoming}><Text>订单取消和退款说明</Text></View>
            </View>
            <View className='bd' style={orderDetail.status == '待支付' ? 'display:block' : 'display:none'}>
                <View className='buttomView'>
                     <View className='button-left'>
                         <Text className='t4'>实际支付</Text>
                         <Text className='t3'>{this.state.orderDetail.totalpayble}元</Text>
                     </View>
                     <View className='button-right' onClick={this.pay.bind(this)}>
                         <AtButton type='primary' >立即支付</AtButton>
                     </View>
                 </View>
            </View>
        </View>
      )
  }
}